<template>
  <view class="zm">
    <!--pages/my/set.wxml-->
    <view @tap="showZ = true" :class="['aicon', isshow ? 'my-shark' : '']"
      ><van-icon name="comment-o" :info="zmlist.length" size="60rpx" /><text>{{ kjtext }}</text></view
    >
    <view class="set-box">
      <image src="@assets/zm.png" class="gzimg" mode="widthFix"></image>
      <view class="xz">请选择需要开具的证明类型</view>

      <view class="list">
        <van-cell-group>
          <view v-for="(item, index) in zmList" :key="index">
            <van-cell size="large" :title="item.name" :is-link="true" @tap="router(item)" />
            <!-- <van-cell title="单元格" :is-link="true"  :border="false" /> -->
          </view>
        </van-cell-group>
      </view>
    </view>
    <van-overlay :show="show" @click="onClickHide" z-index="99999">
      <view class="wrapper">
        <view class="block">
          <view class="title">选择收入证明类型</view>
          <van-cell-group>
            <view v-for="(item, index) in srList" :key="index">
              <van-cell :title="item.name" :is-link="true" @tap="srrouter(item)" />
              <!-- <van-cell title="单元格" :is-link="true"  :border="false" /> -->
            </view>
          </van-cell-group>
        </view>
      </view>
    </van-overlay>
    <van-dialog
      :use-slot="true"
      :use-title-slot="true"
      :show="showZ"
      confirmButtonText="关闭"
      @close="onClose"
      width="85%"
      zIndex="999999"
    >
      <slot-view name="title"><view class="Ztitle">开具记录</view> </slot-view>
      <view class="Kjlist">
        <view class="panel" v-for="(item, index) in zmlist" :key="index">
          <view class="head">
            <view class="letf">
              <view class="title" v-if="item.zm != 4">{{ item.zm | zmName }}</view>
              <view class="title" v-else>{{ item.zm_type }}</view>
              <view class="desc">记录ID: {{ item.id }}</view>
              <view class="desc"
                >支付状态:
                <van-tag size="medium" :type="item.is_pay ? 'success' : 'danger'">{{ item.is_pay | isPay }}</van-tag>
              </view>
              <view class="desc">申请时间: {{ item.time }}</view>
              <view class="desc">获取方式: {{ item.youji | access }}</view>
            </view>
            <view class="right">
              <text v-if="item.is_pay && item.youji == 2 && item.qsdata.qsstatus == 2" class="colorS">可下载</text>
              <text v-else class="colorS">{{ item.status | status }}</text>
            </view>
          </view>
          <view class="footer">
            <van-button size="small" @tap="preview(item)">预览</van-button>
            <van-button
              v-if="item.is_pay && item.youji == 2 && item.qsdata.qsstatus == 2"
              size="small"
              type="danger"
              @tap="download(item)"
              >下载</van-button
            >
            <van-button v-if="!item.is_pay" size="small" type="danger" @tap="goPay(item)">去支付</van-button>
          
          </view>
        </view>
          <view class="noText" v-if="!zmlist.length">
          <van-icon size="300rpx" name="https://xxyg.daxinxin.vip/wxapp/nodata.png" />
          <text> 暂无记录 </text>
        </view>
      </view>
    </van-dialog>
    <view class="adbottom">
      <ad unit-id="adunit-792c10e4172ab915" ad-type="grid" grid-opacity="0.8" grid-count="5" ad-theme="white"></ad>
    </view>
  </view>
</template>

<script>
import Taro from '@tarojs/taro';
import { zmdown } from '@api/rests';
import { zmshow } from '@api/zm';
// import  {zmlist} from '@api/zm'
export default {
  data() {
    return {
      show: false,
      showZ: false,
      // zmlist:[],
      zmList: [
        { name: '工作证明', type: 1 },
        { name: '报考证明', type: 2 },
        { name: '离职证明', type: 3 },
        { name: '收入证明', type: 4 },
      ],
      srList: [
        { name: '应发证明', params: 0 },
        { name: '实发证明', params: 1 },
        { name: '公积金贷款证明', params: 2 },
        // { name: '收入证明', type: 4 },
      ],

      isshow: false,
      kjtext: '',
      info: '',
    };
  },

  methods: {
   
    download(e) {
      Taro.showLoading({
        title: '生成下载模板',
      });
      zmdown({ zmid: e.id, zmtype: e.zm }).then((ress) => {
        console.log(ress, '下载');
        if (!ress.code) {
          Taro.showModal({
            title: '提示',
            confirmText: '复制链接',
            content: '目前小程序不支持本地下载 , 请点击复制链接到任意浏览器打开下载',
            success: function (res) {
              if (res.confirm) {
                Taro.setClipboardData({
                  data: ress.data,
                  success: function (res) {
                    Taro.getClipboardData({
                      success: function (res) {
                        console.log(res.data); // data
                      },
                    });
                  },
                });
              } else if (res.cancel) {
                console.log('用户点击取消');
              }
            },
          });
        }
      });
    },
    goPay(param) {
      const { id, zm, pay_num, youji } = param;
      Taro.navigateTo({
        url: `/pages/checkout/index?zmid=${id}&zmtype=${zm}&paynum=${pay_num}&youji=${youji}`,
      });
    },
    preview(e) {
      let _that = this;
      Taro.showLoading({
        title: '生成预览模板',
      });
      zmshow({ zmid: e.id, zmtype: e.zm }).then((res) => {
        if (!res.code) {
          Taro.downloadFile({
            url: res.data,
            filePath: '',
            success: function (res) {
              var filePath = res.tempFilePath;
              wx.openDocument({
                filePath: filePath,
                showMenu: true,
                fileType: 'pdf',
                success: function (res) {
                  console.log('打开文档成功');
                },
              });
            },
          });
        }
      });
    },
    onClickHide() {
      this.show = false;
    },

    onClose() {
      this.showZ = false;
    },
    router(item) {
      console.log(item);
      const { name, type } = item;
      if (type == 4) {
        this.show = true;
        return;
      }
      Taro.navigateTo({
        url: `/pages/zm/zmShow/index?title=${name}&type=${type}`,
      });
    },

    srrouter(item) {
      const { name, params } = item;
      Taro.navigateTo({
        url: `/pages/zm/zmShow/index?title=收入证明-${name}&type=4&params=${params}`,
      });
    },
  },
  computed: {
    bangding() {
      console.log(this.$store.state.binding.bd, 'this.$store.state.binding.bd');
      return this.$store.state.binding.bd;
    },
    zmlist() {
      return this.$store.state.zmlist.zmlist;
    },
    // showDo(){

    //   return
    // }
  },
  onShow() {
    let bd = Taro.getStorageSync('bd');
    this.$store.commit('binding/isbd');
    if (bd) {
      return;
    }
    this.$store.dispatch('binding/binding').then(() => {
      if (this.bangding == 0) {
        Taro.showModal({
          title: '未绑定',
          content: '该功能需要绑定手机才能使用',
          confirmText: '马上绑定',
          cancelText: '返回首页',
          success: function (res) {
            if (res.confirm) {
              Taro.navigateTo({
                url: '/pages/binding/index',
              });
            } else if (res.cancel) {
              // Taro.navigateBack({
              //   delta: 2,
              // });
              Taro.reLaunch({
                url: '/pages/index/index',
              });
            }
          },
        });
      }
    });
  },
  created() {
    this.$store.commit('zmlist/clearList');
    var session_id = Taro.getStorageSync('session_id');
    var gsid = Taro.getStorageSync('gsid');
    this.gsid = Taro.getStorageSync('gsid');
    if (session_id.length < 1) {
      Taro.showModal({
        title: '提示',
        content: '需要授权登录后操作',
        success(res) {
          if (res.confirm) {
            Taro.navigateTo({
              url: '/pages/login/index',
            });
            console.log('用户点击确定');
          } else if (res.cancel) {
            console.log('用户点击取消');
            Taro.navigateBack({
              delta: 2,
            });
          }
        },
      });
    } else {
         this.$store
      .dispatch('zmlist/getZmlist')
    

    this.isshow = true;
    setTimeout(() => {
      this.kjtext = '开具记录';
     
    }, 2500);
    }
  },
  onPullDownRefresh() {
    Taro.showToast({
      title: '正在数据...',
      icon: 'loading',
      duration: 2000,
    });
     this.$store
      .dispatch('zmlist/getZmlist')
    // this.setData({fabus:[]});//先清空数据
    // this.loadIndex();//再重新加载数据
    Taro.stopPullDownRefresh(); //停止刷新操作
  },
  onShareAppMessage(res) {
    if (res.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target);
    }
    return {
      title: '薪薪员工（开具证明）',
      path: '/pages/zm/index',
      success: function (res) {
        // 转发成功
      },
      fail: function (res) {
        // 转发失败
      },
    };
  },
  onShareTimeline() {},
};
</script>

<style lang='less'>
page {
  background: #f7f8fa;
  font-family: Microsoft Yahei;
  font-size: 30px;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.my-shark {
  animation: login-shake 3s 1 ease-in;
  animation-iteration-count: 1;
}
@keyframes login-shake {
  0% {
    transform: scale(3) translate(-100%, -100%);
  }
  10% {
    transform: scale(2) translate(-100%, -100%);
  }
  20% {
    transform: scale(3) translate(-100%, -100%);
  }
  50% {
    transform: scale(1);
  }
  55% {
    transform: scale(1.1) rotate(3deg);
  }
  60% {
    transform: scale(1.1) rotate(-3deg);
  }
  65% {
    transform: scale(1.1) rotate(3deg);
  }
  70% {
    transform: scale(1.1) rotate(-3deg);
  }
  75% {
    transform: scale(1.1) rotate(3deg);
  }
  80% {
    transform: scale(1.1) rotate(-3deg);
  }
  100% {
    transform: scale(1);
  }
  // 10%, 20% {transform: scale(0.9) rotate(-3deg) ;}
  // 30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg) translate(-100%, -100%);}
  // 40%, 60%, 80% {transform: scale(1.1) rotate(-3deg) translate(-100%, -100%);}
  // 100% {transform: scale(1) rotate(0);}
}

.aicon {
  position: absolute;
  top: 760px;
  right: 35px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  font-size: 24px;
}
.block {
  width: 500px;
  background-color: #fff;
  padding: 0 20px;
  border-radius: 50px;
  overflow: hidden;
  .title {
    width: 100%;
    padding: 50px 0;
    text-align: center;
    font-size: 40px;
    color: #06415c;
    font-weight: bold;
  }
  /* border-radius: 550px; */
  /* text-align: center; */
}
.adbottom {
  width: 90%;
  position: absolute;
  bottom: 20px;
  left: 50%;
  margin-left: -45%;
}
.zan-box {
  width: 100%;
  text-align: center;
  margin-top: 40%;
  float: left;
}
.zan-img {
  width: 50px;
  height: 50px;
  display: inline-block;
}
.zan-text {
  display: block;
  text-align: center;
  color: #b8b8b8;
  font-size: 14px;
  width: 100%;
  margin-top: 10px;
}
.gzimg {
  width: 100%;
  height: auto;
  clear: both;
}
.set-box {
  width: 100%;
  float: left;
  background: #fff;
  padding: 0 50px;
  box-sizing: border-box;
}
.xz {
  text-align: center;
  color: #06415c;
  line-height: 110rpx;
  height: 110rpx;
  font-weight: bold;
  margin-bottom: 10px;
}
.Ztitle {
  font-size: 40px;
  margin-bottom: 10px;
}
.Kjlist {
  width: 100%;
  height: 700px;
  overflow: auto;
}
.already {
  color: aqua;
}
.not {
  float: right;
  color: red;
  display: flex;
  align-items: center;
}
.titleZ {
  display: flex;
  align-items: center;
}
.footer {
  display: flex;
  flex-direction: row-reverse;
  .van-button {
    margin-left: 20px;
  }
}
.panel {
  display: flex;
  flex-direction: column;
  padding: 20px;
  border-bottom: #f8f9fa solid 1px;
  .head {
    margin-bottom: 30px;
    .letf {
      float: left;
      .title {
        font-size: 35px;
        font-weight: 550;
        margin-bottom: 10px;
      }
      .desc {
        font-size: 30px;
        color: #969799;
      }
    }
    .right {
      float: right;
      .colorS {
        color: #4da6ff;
      }
      .colorF {
        color: #f75454;
      }
    }
  }
}
  .noText {
    // width: 100%;
    // text-align: center;
    margin-top: 100px;
    color: #1296db;
    display: flex;
    letter-spacing: 30px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text {
      margin-top: 30px;
    }
  }
</style>